<template>
    <div>
      <div style="margin-left:20px;padding: 0px 0px;display:flex;border-bottom:1px solid #ddd;">
        <div style="padding: 20px 0px;font-family:500">
          取证单格式化
        </div>
      </div>
      <div class="content" >
          <div class="right-box" >
            <div class="upload">
              <el-upload
              :headers="headers"
                class="upload-demo"
                ref="upload"
                name="file"
                :limit="1"
                :timeout="300000"
                :on-exceed="handleExceed"
              :action="action"
              :on-success="handleSuccess"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :auto-upload="false">
              <el-button slot="trigger"  type="primary" size="small" @click="putFile">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="warning" @click="submitUpload"  
              >格式化</el-button>
              <span style="padding-left:20px;font-size:14px;color:#8492A6">只能上传word文件</span>
              </el-upload>
            </div>
            <div style="margin:20px 0px;font-size:14px;color:#606266">
                提醒：本内容由AI智能审计管理系统生成
            </div>
            <!-- <div  class="code">
              <div v-if="creattag" style="color:#409EFF">
                正在生成中，请稍后<dot>...</dot>
              </div>
              <div v-if="bookid!=''">
                {{result}}
              </div>
            </div> -->
            <el-button type="success" :disabled="bookid==''" style="width:360px;height:50px" @click="downLoad">立即下载</el-button>
          </div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'waterworks-home',  
  data(){
    return{
      result:'',
      bookid:'',
      fileList:[],
      creattag:false,
      action:'/api/services/hzsfjtai/llm/auditForm',
    }
  },
  computed: {
    headers(){
      const sessionId = localStorage.getItem('X-Token');
      const projectId = localStorage.getItem('projectId');
        return{
          'X-Token':sessionId,
          'projectId':projectId
        };
    },
  },
  methods:{
     handleSuccess(response, file) {
       this.$refs.upload.clearFiles(); 
       if(response.code==200){
         // 处理上传成功的逻辑
          console.log('上传成功', response, file);
          this.$message.success('上传成功！'); // 使用 Element UI 的消息提示
          this.creattag=false
          this.bookid=response.data.id

       }else{
         this.$message.error("上传失败")
         this.creattag=false
       }
      
      
    },
    submitUpload() {
      console.log(999,this.$refs.upload.uploadFiles);
        if (this.$refs.upload.uploadFiles.length === 0) {
          this.$message.warning('请先选择文件');
          return false; // 阻止上传动作
        } else {
          this.$refs.upload.submit(); // 触发上传
          this.creattag=true
        }
        
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 限制上传数量
      handleExceed(files, fileList) {//files指的是你刚上传的文件，fileList指的是你上传之前的文件数组
          this.$set(fileList[0], 'raw', files[0]);//raw就是指文件
          this.$set(fileList[0], 'name', files[0].name);//name就是指文件名
          this.$refs.upload.clearFiles();//删除所有上传的文件
          this.$refs.upload.handleStart(files[0]);//handleStart()指的是手动选择文件，Element Plus 的el-upload有说明
          
      },

    putFile(){
      this.bookid=''
    },
    downLoad(){
      window.location.href="/api/services/hzsfjtai/file/downloadFile/"+this.bookid
    },
    exit(){
      this.$router.push({ path: '/dashboard' })
    },
  },
  mounted() {
  }
}
</script>
<style scoped lang="less" >
.code{
  margin: 30px 0px;
  min-height: 240px;
  padding: 30px;
  line-height: 40px;
  white-space: pre-wrap;       /* 允许元素内的文本换行 */
  width: 50%;
  background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px;
    overflow: auto;
    font-family: 'Courier New', Courier, monospace;
}
dot {
      display: inline-block;
      height: 1em;
      line-height: 1;
      text-align: left;
      vertical-align: -0.25em;
      overflow: hidden;
    }
    dot::before {
      display: block;
      content: '...\A..\A.';
      white-space: pre-wrap;
      animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
      33% {
        transform: translateY(-2em);
      }
      66% {
        transform: translateY(-1em);
      }
    }
</style>

<style  lang="less">
  .content{
    display:flex;
    padding:20px;
    .right-box{
      flex:1;
      border: 0;
    }
  }
</style>